<header>
    <div class="navbar navbar-expand-lg bg-dark-grey fixed-top">
        <div class="container">    
            <a routerLink="/home" class="navbar-brand" href="javascript:;">
                <img src="/admin/assets/img/Sustainalytics-Logo-2018-white.svg" class="logo" />
            </a>    

            <div class="navbar-collapse collapse" dropdown>
                <ul class="navbar-nav ml-auto">                 
                    <li class="nav-item dropdown">
                        <a id="navUser" class="nav-link dropdown-toggle" href="javascript:;" dropdownToggle>{{ userInitials }}</a>
                        <div *dropdownMenu class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" href="javascript:;">
                                <div class="bold">{{ user.firstName }} {{ user.lastName }}</div>
                                {{ user.email }}
                            </a>
                            <a routerLink="/login" class="dropdown-item" href="javascript:;">Sign Out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>
<main role="main">
    <div class="container mt-5 d-flex">
        <div class="w-20 sidebar">            

            <ul class="list-group list-group-flush">           
                <!-- MANAGEMENT -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a href="javascript:;" (click)="current = (current == 'users' ? '': 'users')" [attr.aria-expanded]="current == 'users'" aria-controls="collapseBasic">Accounts, Users and More</a>                            
                        </div>
                    </div>
                    <div class="collapse pb-2" [collapse]="current != 'users'" data-parent="#productsAccordion">
                        <div class="submenu">
                            <a [routerLink]="['management', 'accounts']" [routerLinkActive]="['active']">Accounts</a>
                            <a [routerLink]="['management', 'users']" [routerLinkActive]="['active']">Users</a>
                            <a [routerLink]="['management', 'iplogin']" [routerLinkActive]="['active']">Ip Login</a>
                        </div>
                    </div>
                </li>
                <!-- KNOWLEDGE -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a href="javascript:;" (click)="current = (current == 'knowledge' ? '': 'knowledge')" [attr.aria-expanded]="current == 'knowledge'" aria-controls="collapseBasic">News, Events and More</a>                            
                        </div>
                    </div>
                    <div class="collapse pb-2" [collapse]="current != 'knowledge'" data-parent="#productsAccordion">
                        <div class="submenu">
                            <a [routerLink]="['knowledge', 'spotlights']" [routerLinkActive]="['active']">News</a>
                            <a [routerLink]="['knowledge', 'events']" [routerLinkActive]="['active']">Events</a>
                            <a [routerLink]="['knowledge', 'insights']" [routerLinkActive]="['active']">Insights</a>
                            <a [routerLink]="['knowledge', 'notifications']" [routerLinkActive]="['active']">Notifications</a>
                        </div>
                    </div>
                </li>
                <!-- WEIGHT MATRICES -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a [routerLink]="['weightmatrices']" [routerLinkActive]="['active']">Weight Matrices</a>                            
                        </div>
                    </div>
                </li>
                <!-- TOOLS -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a href="javascript:;" (click)="current = (current == 'tools' ? '': 'tools')" [attr.aria-expanded]="current == 'tools'" aria-controls="collapseBasic">Tools</a>                            
                        </div>
                    </div>
                    <div class="collapse pb-2" [collapse]="current != 'tools'" data-parent="#productsAccordion">
                        <div class="submenu">                            
                            <a [routerLink]="['tools', 'universes']" [routerLinkActive]="['active']">Universes</a>
                            <a [routerLink]="['tools', 'claims']" [routerLinkActive]="['active']">Claims</a>
                            <a [routerLink]="['tools', 'percentile']" [routerLinkActive]="['active']">ESG Focus Thresholds Percentile</a>
                        </div>
                    </div>
                </li>
                <!-- FTP REPORTS -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a [routerLink]="['ftp']" [routerLinkActive]="['active']">FTP Reports</a>                            
                        </div>
                    </div>
                </li>
                <!-- GOVERNANCE REPORTS -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a [routerLink]="['governance']" [routerLinkActive]="['active']">Governance Reports</a>                            
                        </div>
                    </div>
                </li>
                <!-- SCREENING/REPORT -->
                <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a href="javascript:;" (click)="current = (current == 'reports' ? '': 'reports')" [attr.aria-expanded]="current == 'reports'" aria-controls="collapseBasic">Screening/Report Tools</a>                            
                        </div>
                    </div>
                    <div class="collapse pb-2" [collapse]="current != 'reports'" data-parent="#productsAccordion">
                        <div class="submenu">                            
                            <a [routerLink]="['reports', 0]" [routerLinkActive]="['active']">Screening</a>
                            <a [routerLink]="['reports', 1]" [routerLinkActive]="['active']">Report</a>
                        </div>
                    </div>
                </li>
                 <!-- VALIDATION -->
                 <li class="list-group-item company-menu-item item-link">
                    <div class="d-flex align-items-center main-item">
                        <div class="mr-auto">
                            <a [routerLink]="['validation']" [routerLinkActive]="['active']">Validation</a>                            
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="w-80 main">
            <router-outlet></router-outlet>
        </div>        
    </div>   
</main>
<lrtm class="row" style="margin:0px;"></lrtm>
